<template>
  <div class="aside">
    <div class="aside-info">
      <img class="aside-img" src="../assets/img/AD-logo.png" v-show="!$store.state.navCollapse">
      <img class="aside-img-mini" src="../assets/img/AD.png" v-show="$store.state.navCollapse">
    </div>

    <div class="aside-menu">
      <transition name="el-zoom-in-center">
        <el-menu router :default-active="$route.path" class="el-menu" background-color="rgb(27, 34, 70)"
          text-color="white" active-text-color="white" unique-opened :collapse="$store.state.navCollapse">
          <el-menu-item index="/HomeView">
            <i class="el-icon-s-home"></i>
            <span class="title">主页</span>
          </el-menu-item>
          <!-- <template v-for="menu in $store.state.permission.menus"> -->
          <template v-for="menu in $store.state.menus">
            <!-- <el-menu-item v-if="!menu.children" :index="menu.path" :key="menu.path">
            <i :class="menu.icon"></i>
            <span slot="title">{{ menu.name }}</span>
          </el-menu-item> -->
            <el-submenu :index="menu.path" v-if="menu.children" :key="menu.name">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span class="title">{{ menu.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="subMenu in menu.children" :key="subMenu.path" :index="subMenu.path">
                  <i :class="subMenu.icon"></i>
                  <span> {{ subMenu.name }}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </template>
        </el-menu>
      </transition>
    </div>


    <!-- <div class="aside-menu">
      <el-menu router :unique-opened="true" class="el-menu" background-color="rgb(27, 34, 70)" text-color="white"
        active-text-color="white" :default-active=current :default-openeds=[]>

        <el-menu-item index="/HomeView">
          <i class="el-icon-s-home"></i>
          <span>主页</span>
        </el-menu-item>

        <el-submenu index="/DormManage" v-show="(show == true)">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>宿舍管理</span>
          </template>
          <el-menu-item index="/AccommodationManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">住宿管理</el-menu-item>
          <el-menu-item index="/RoomManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">房间管理</el-menu-item>
          <el-menu-item index="/BuildingManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">楼宇管理</el-menu-item>
          <el-menu-item index="/DepartmentManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">部门管理</el-menu-item>
          <el-menu-item index="/CollegeManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">学院管理</el-menu-item>
          <el-menu-item index="/CampusManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">校区管理</el-menu-item>
          <el-menu-item index="/BedManage" style="padding-left:48px" v-show="(show == true)">床位管理</el-menu-item>
          <el-menu-item index="/ApplyList" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 5 || clientRole == 0)">申请列表</el-menu-item>
          <el-menu-item index="/GraduateManage" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">研究生新生入住管理</el-menu-item>
          <el-menu-item index="/OldStudent" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 5 || clientRole == 0)">老生续住管理</el-menu-item>
        </el-submenu>

        <el-submenu index="/MaintainView" v-show="(clientRole == 4 || clientRole == 6 || clientRole == 0)">
          <template slot="title">
            <i class="el-icon-s-cooperation"></i>
            <span>报修管理</span>
          </template>
          <el-menu-item index="/MaintainForm" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 6 || clientRole == 0)">报修单管理</el-menu-item>
          <el-menu-item index="/MaintainMaterial" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 6 || clientRole == 0)">报修材料管理</el-menu-item>
          <el-menu-item index="/MaintainType" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">报修类型设置</el-menu-item>
          <el-menu-item index="/MaintainTime" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 0)">报修时间段设置</el-menu-item>
          <el-menu-item index="/Evaluate" style="padding-left:48px"
            v-show="(clientRole == 4 || clientRole == 6 || clientRole == 0)">评价管理</el-menu-item>
        </el-submenu>

        <el-submenu index="/content" v-show="(clientRole == 4 || clientRole == 0)">
          <template slot="title">
            <i class="el-icon-s-comment"></i>
            <span>内容管理</span>
          </template>
          <el-menu-item index="/Message" style="padding-left:48px">通知公告</el-menu-item>
          <el-menu-item index="/Advice" style="padding-left:48px">意见建议</el-menu-item>
        </el-submenu>

        <el-submenu index="/UserManage" v-show="(clientRole == 4 || clientRole == 0)">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/Maintainer" style="padding-left:48px">维修工管理</el-menu-item>
          <el-menu-item index="/SchoolWorker" style="padding-left:48px">校工管理</el-menu-item>
          <el-menu-item index="/Student" style="padding-left:48px">学生管理</el-menu-item>
        </el-submenu>

        <el-submenu index="/authority" v-show="(clientRole == 4 || clientRole == 0)">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/RoleManage" style="padding-left:48px">角色管理</el-menu-item>
        </el-submenu>

        <el-submenu index="/system" v-show="(clientRole == 4 || clientRole == 0)">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/MenuManage" style="padding-left:48px">菜单管理</el-menu-item>
        </el-submenu>

      </el-menu>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: "",
      clientRole: "",
      show: false,
      // 当前角色角色可以访问的菜单
      menus: []
    }
  },
  // watch: {
  //   menus: {
  //     // 执行方法
  //     handler(oldValue, newValue) {
  //       // console.log(oldValue.campusId)
  //       // console.log(newValue)
  //       if (oldValue.length == 0) {
  //         console.log(oldValue.length);
  //         // this.menus = this.$store.state.menus
  //         this.menus = JSON.parse(window.localStorage.getItem("menus"))
  //       }
  //     },
  //     deep: true, // 深度监听
  //     immediate: true  // 第一次改变就执行
  //   }
  // },
  methods: {
  },
  created() {
    // console.log(JSON.parse(window.localStorage.getItem("menus")));
    // console.log(this.$store.state.menus);
    this.$store.commit('SET_MENUS', JSON.parse(window.localStorage.getItem("menus")))
    // // this.menus = JSON.parse(window.localStorage.getItem("menus"))
    // this.menus = this.$store.state.menus
    // console.log(this.menus);
    // if (this.menus.length == 0) {
    //   this.menus = JSON.parse(window.localStorage.getItem("menus"))
    // }
    this.current = this.$route.path

    // if (!this.clientRole) {
    //   this.clientRole = window.localStorage.getItem('clientRole')
    //   if (!this.clientRole) {
    //     window.location.reload()
    //   }
    // }
    // if (this.clientRole == 0 || this.clientRole == 1 || this.clientRole == 2 || this.clientRole == 4 || this.clientRole == 5 || this.clientRole == 6) {
    //   this.show = true
    // }
    // if (window.localStorage.getItem('name') == "吴修宏" || window.localStorage.getItem('name') == "陆建国" || window.localStorage.getItem('name') == "蒋顺奎" || window.localStorage.getItem('name') == "吴建军" || window.localStorage.getItem('name') == "赵毅") {
    //   this.show = false
    // }
  }
}
</script>

<style lang="scss" scoped>
.aside-menu {
  overflow-y: hidden;
  overflow-x: hidden;
}

.aside-title {
  text-align: center;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 60px;
  width: 150px;
  height: 60px;
  // border: 1px solid white;
}

.aside-img {
  width: 130px;
  height: 50px;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.aside-img-mini {
  width: 50px;
  height: 50px;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.aside-info {

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.el-menu {
  border-right: 0;
}

// .el-menu-item {
//   // line-height:50px;
//   // vertical-align: center;
// }

::v-deep .el-submenu__title {
  &:hover {
    background: #497cdd !important;
  }
}

::v-deep .el-menu-item {
  &:hover {
    background: #497cdd !important;
  }

  &.is-active {
    background: #497cdd !important;
  }
}

// .remark {
//   color: white;
//   font-size: 14px;
//   margin-top: 300px;
//   // padding-left: 20px;
// }
.title {
  margin-left: 10px;
}
</style>
